<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <title>设计师权益</title>
    <link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}"/>
    <link rel="stylesheet" href="../../../static/weixin/css/common.css" th:href="@{/weixin/css/common.css}"/>
    <script type="text/javascript" th:src="@{/weixin/js/zepto.min.js}"></script>
    <script type="text/javascript" src="../../../static/weixin/js/weui.min.js"
            th:src="@{/weixin/js/weui.min.js}"></script>
    <script type="text/javascript" src="../../../static/weixin/js/fastclick.min.js"
            th:src="@{/weixin/js/fastclick.min.js}"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"
            th:src="@{/weixin/js/jweixin-1.0.0.js}"></script>
</head>
<body>
<div class="container">
    <!-- Main content -->
    <div class="page">
        <div class="page__bd">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">
                        <h4 class="weui-media-box__title">设计师权益</h4>
                        <p class="weui-media-box__desc">协议内容, 协议内容, 协议内容, 协议内容, 协议内容, 协议内容</p>
                    </div>
                </div>
                <div class="weui-panel__ft">
                </div>
            </div>

            <div id="payDiv" class="weui-btn-area" th:if="${not hasChoose}">
                <input id="payBtn" type="button" class="weui-btn weui-btn_primary" th:value="|同意支付 ${money}元|"
                       value="同意支付元"/>
            </div>

            <div id="cancelDiv" class="weui-btn-area" th:if="${not hasChoose}">
                <input id="cancelBtn" type="button" class="weui-btn weui-btn_warn" th:value="暂不支付"/>
            </div>

        </div>
    </div>
</div>

<script th:inline="javascript">
    var contextPath = /*[[@{/}]]*/ null;
    var orderId = /*[[${orderId}]]*/ null;

    var prepayId;
    var paySign;
    var appId;
    var timeStamp;
    var nonceStr;

    $("#cancelBtn").click(function () {
       var url = contextPath + "weixin/pay/cancelRights";

       $.get(url, function () {
           $('#payDiv').hide();
           $('#cancelDiv').hide();
       });
    });

    $("#payBtn").click(function () {
        var url = contextPath + "weixin/pay/unifiedOrder";
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            data: {orderId: orderId},
            success: function (data) {
                if (data.status == 1) {
                    paySign = data.paySign;
                    appId = data.appId;
                    timeStamp = data.timeStamp;
                    nonceStr = data.nonceStr;
                    prepayId = data.prepayId;

                    rightsPay();
                } else {
                    alert("微信统一下单失败");
                }
            }
        });
    });

    function rightsPay() {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    }
    function onBridgeReady() {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": appId,     //公众号名称，由商户传入
                "timeStamp": timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": nonceStr, //随机串
                "package": prepayId,
                "signType": "MD5",         //微信签名方式:
                "paySign": paySign    //微信签名
            }, function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    alert("微信支付成功!");
                    $("#payDiv").hide();
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    alert("用户取消支付!");
                } else {
                    alert("支付失败!");
                }
            });
    }
</script>
</body>
</html>